<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue</title>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .nav {
        height: 44px;
        background-color: white;
        display: flex;
        padding: 0 20px;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
      }
      .nav > .logo {
        width: 177px;
        height: 27px;
      }
      .nav > .nav-right {
        height: 27px;
        width: 82px;
        animation: move 4s infinite;
      }
      .nav > .nav-right p {
        color: white;
        border: 1px solid rgb(5, 9, 244);
        border-radius: 5px;
        background-color: rgb(5, 9, 244);
      }
      .nav-right > div {
        height: 44px;
        text-align: center;
        line-height: 25px;
      }
      @keyframes move {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-44px);
        }
        100% {
          transform: translateY(0);
        }
      }

      /* #region 轮播样式 */
      .swiper-img {
        height: 130px;
      }
      /* #endregion */

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        border: 1px solid lightblue;
        padding: 0 10px;
      }
      .content {
        display: flex;
        align-items: center;
        height: 150px;
      }
      .content img {
        width: 123px;
        height: 92px;
      }
      .content .contents {
        height: 66%;
        padding: 20px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .content .contents p {
        color: gray;
      }
      .imgs {
        position: relative;
      }
      /* .imgs .tags {
              position: absolute;
              top: 0;
              left: 0;
              background-color: orange;
              color: white;
              width: 70px;
              height: 30px;
              text-align: center;
              line-height: 30px;
            } */

      .hot {
        width: 50%;
      }

      .hot .imgg img {
        width: 90%;
        padding: 15px 10px;
      }

      .hotList {
        display: flex;
        flex-wrap: wrap;
      }
    </style>
  </head>

  <body>
    <div id="app">

      <title_com title="热门教程"></title_com>
      <div class="hotList">
        <hot_com :content="item" v-for="item in Hot" :key="item.id"></hot_com>
      </div>

      <title_com title="图文教程"></title_com>
      <content_com
        :content="item"
        v-for="item in tutorials"
        :key="item.id"
      ></content_com>
      <title_com title="推荐资讯"></title_com>
      <content_com
        :content="item"
        v-for="item in news"
        :key="item.id"
      ></content_com>
    </div>

    <!-- 导航头部 -->
    <template id="nav">
      <div class="nav">
        <img
          class="logo"
          src="	https://assets-cdn.lanqb.com/lanqb/logo05.png"
          alt=""
        />
        <div class="nav-right">
          <div><p>注册有礼</p></div>
          <div>
            <span>注册</span>
            <span>登陆</span>
          </div>
        </div>
      </div>
    </template>


    <!-- 热门教程 -->
    <template id="hot">
      <div class="hot">
        <div class="imgg">
          <img :src="	'https://ss.lanqb.com/'+ content.posters.banner" alt="" />
          <p>{{content.title}}</p>
        </div>
      </div>
    </template>

    <!-- 推荐咨询 -->
    <template id="title">
      <div class="title">
        <h3>{{title}}</h3>
        <p>查看更多&gt;</p>
      </div>
    </template>

    <!-- 图文教程 -->
    <template id="content">
      <div class="content">
        <div class="imgs">
          <img :src="	'https://ss.lanqb.com/'+content.imgCover" />
        </div>
        <div class="contents">
          <h3>{{content.title}}</h3>
          <p v-if="content.user_profile">
            老师:{{content.user_profile.nickname}}
          </p>
          <p v-else="">{{content.created_at}}</p>
        </div>
      </div>
    </template>

    <script>

      let hot_com = {
        template: "#hot",
        props: ["content"],
      };

      let title_com = {
        template: "#title",
        props: ["title"],
      };

      let content_com = {
        template: "#content",
        props: ["content"],
      };

      let vm = new Vue({
        el: "#app",
        data: {
          news: [],
          tutorials: [],
          Hot: [],
        },
        methods: {
        
        },
        components: {
          title_com,
          content_com,
          hot_com,
        },


        created() {
          // 推荐资讯
          fetch("https://m.lanqb.com/api/home/news")
            .then((res) => res.json())
            .then((data) => {
              this.news = data.slice(0, 3);
            });
          // 图文教程
          fetch("https://m.lanqb.com/api/home/graphic-tutorials")
            .then((res) => res.json())
            .then((data) => {
              this.tutorials = data.slice(0, 3);
            });
          // 热门教程
          fetch("https://m.lanqb.com/api/home/series")
            .then((res) => res.json())
            .then((data) => {
              this.Hot = data.slice(0, 4);
            });

        },
      });
    </script>
  </body>
</html>
